<template>
  <view class="page content">
    <unitv-page id="indexPage" ref="unitvPage" @back="pageBack">
      <view>
        <unitv-zone id="zone1" class="zone1" :autoFous="true" down="zone2" :item="3" :values="item1"
                    :column="item1.length">
          <unitv-scroll>
            <unitv-item v-for="(a,index) in item1" :item="index" :key="index" class="item"
                        @hover="hoverItem">{{a}}</unitv-item>
          </unitv-scroll>
        </unitv-zone>
      </view>

      <unitv-zone id="zone2" class="zone2" up="zone1" down="zone3" :values="left_ads" :column="item2.length">
        <unitv-item v-for="(a,index) in left_ads" :item="index" :key="index" class="item" @click="clickItem">
          <image :src="a.image" mode="aspectFill" />
        </unitv-item>
      </unitv-zone>

      <unitv-zone id="zone3" class="zone3" up="zone2" down="zone4" :values="topic" :column="item3.length">
        <unitv-item v-for="(a,index) in topic" :item="index" :key="index" class="item">
          <image :src="a.images" mode="aspectFill" />
        </unitv-item>
      </unitv-zone>

      <view class="title">Title</view>
      <unitv-zone id="zone4" class="zone4" up="zone3" down="zone5" :values="topic" :column="item4.length">
        <unitv-scroll>
          <unitv-item v-for="(a,index) in topic" :item="index" :key="index" class="item">
            <image :src="a.bgimage" mode="aspectFill" />
          </unitv-item>
        </unitv-scroll>
      </unitv-zone>

      <view class="title">Title2</view>
      <unitv-zone id="zone5" class="zone5" up="zone4" :values="new_video" :column="5" :row="2">
        <unitv-item v-for="(a,index) in new_video" :item="index" :key="index" class="item">
          <image :src="a.image" mode="aspectFill"/>
        </unitv-item>
      </unitv-zone>

    </unitv-page>
  </view>
</template>

<script>
import http from '@/http.js'
export default {
  data() {
    return {
      item1: [1, 2, 3, 4, 5, 6, 7, 8],
      item2: [{
        id: 1,
        title: 'asdasdads',
        images: 'http://p1.music.126.net/AQahXIlJ4Ml4egAcIzMIqQ==/109951169050855000.jpg'
      }, {
        id: 1,
        title: 'asdasdads',
        images: 'http://p1.music.126.net/4fXBcMraU4qWUEYWlxZFkg==/109951169050897726.jpg'
      }],
      item3: [{
        id: 1,
        images: 'http://p2.music.126.net/WqwmRZhz6lzi4BkxwLaDhQ==/109951163097401251.jpg',
        title: ''
      },
        {
          id: 2,
          images: 'http://p2.music.126.net/AWcDI5wc9fkS2bZt6wIm-Q==/109951163212638897.jpg',
          title: ''
        },
        {
          id: 3,
          images: 'http://p1.music.126.net/QcPJfzds8ejF1FPgBaXMTw==/109951163128461676.jpg',
          title: ''
        },
        {
          id: 4,
          images: 'http://p1.music.126.net/RGsJyDuaOVNx0Mt0AvByQQ==/109951166994369315.jpg',
          title: ''
        }
      ],
      item4: [1, 2, 3, 4, 5, 6, 7, 8],
      item5: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      curIndex: 7,
      new_video:[],
      topic:[],
      left_ads:[]
    }
  },
  onBackPress(options) {
    this.$refs.unitvPage.evtBack();
    return true;
  },
  computed: {},
  onLoad() {
    http('index/home',{},{
      hideLoading:false,
      hideMsg:true,
    }).then(res=>{
      console.log(res)
      this.new_video = res.data.video
      this.topic = res.data.topic
      this.left_ads = res.data.ads.left_ads
    }).catch(err=>{
      console.log(err)

    })
  },
  onReady() {

  },
  methods: {
    pageBack(e) {
      console.log("按了返回");
      uni.showModal({
        title: '提示',
        content: '是否退出',
        success: function(res) {
          if (res.confirm) {
            console.log('用户点击确定');
            plus.runtime.quit();
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
      return false;
    },
    hoverItem(e) {
      console.log("获得焦点：" + e)

    },
    clickItem(e) {
      console.log("点击了：" + e);
      uni.showToast({
        title: '成功点击了',
        icon: 'none',
        duration: 2000
      });
    }
  }
}
</script>



<style>
.content {
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 30rpx;
  margin-left: 10rpx;
}

.item {
  background: #d6d6d6;
  margin: 0px 10rpx;
  text-align: center;
  display: inline-block;
}

.zone1 {
  height: 50rpx;
  width: 100%;
  display: flex;
  white-space: nowrap;
  margin-top: 40rpx;
  align-items: center;
}

.zone1 .item {
  width: 80rpx;
  height: 40rpx;
  line-height: 40px;
}

.zone2 {
  margin-top: 5rpx;
  display: flex;
  height: 160rpx;
  align-items: center;
}

.zone2 .item {
  width: 50%;
  height: 150rpx;
  line-height: 150px;
  overflow: hidden;
  border-radius: 20rpx;
}

.zone2 .item image {
  width: 100%;
  height: 100%;
  display: block;
}

.zone3 {
  margin-top: 5rpx;
  display: flex;
  height: 110rpx;
  align-items: center;
}

.zone3 .item {
  width: 25%;
  height: 100rpx;
  line-height: 100rpx;
  border-radius: 20rpx;
  overflow: hidden;
}

.zone3 .item image {
  width: 100%;
  height: 100%;
  display: block;
}

.zone4 {
  margin-top: 5rpx;
  width: 100%;
  height: 110rpx;
  display: inline-block;
  white-space: nowrap;
  align-items: center;
}

.zone4 .item {
  width: 25%;
  height: 100rpx;
  line-height: 100rpx;
  overflow: hidden;
  border-radius: 20rpx;
}

.zone4 .item image {
  width: 100%;
  height: 100%;
  display: block;
}

.zone4 .item.item-hover {

}

.zone5 {
  margin-top: 5rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 50rpx;
  align-items: center;
  padding: 20rpx;
}

.zone5 .item {
  width: 125rpx;
  height: 155rpx;
  line-height: 115rpx;
  margin: 5rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  border-radius: 10rpx;
  transition: all linear 0.2s;
}

.zone5 .item image {
  width: 100%;
  height: 100%;
  display: block;
}

.item-hover {
  transform: scale(1.04);
  box-shadow: 2px 4px 6px #555555;
  animation: glow 1500ms ease-out infinite alternate;
  -webkit-transform: scale(1.04);
  -webkit-box-shadow: 2px 4px 6px #555555;
  -webkit-animation: glow 1500ms ease-out infinite alternate;
  /* background: #585dfa; */
  zoom: 1.05;
}

.zone1 .item-active {
  zoom: 0;
  background: #4CD964
}

.zone1 .item-hover {
  zoom: 0;
  background: #DD524D
}

.zone5 .item-hover {
  zoom: 0;
}
</style>
